<!--
 * @Description: 登录表单
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2025-06-06 10:37:22
 * @LastEditTime: 2025-09-16 17:38:29
-->
<template>
  <el-form
    ref="loginForm"
    :rules="loginFormRules"
    :model="loginFormData"
    class="login-form-box"
  >
    <el-form-item prop="accountNo">
      <el-input
        v-model="loginFormData.accountNo"
        clearable
        placeholder="账号"
        @keyup.enter="onSubmit"
      >
        <template #prefix>
          <fy-icon
            name="user"
            size="14"
            color="var(--el-text-color-placeholder)"
          />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        type="password"
        v-model="loginFormData.password"
        clearable
        showPassword
        placeholder="密码"
        @keyup.enter="onSubmit"
      >
        <template #prefix>
          <fy-icon
            name="key"
            size="14"
            color="var(--el-text-color-placeholder)"
          />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="verifyCode">
      <el-input
        v-model="loginFormData.verifyCode"
        class="verify-input"
        clearable
        placeholder="验证码"
        @keyup.enter="onSubmit"
      >
        <template #prefix>
          <fy-icon
            name="Postcard"
            size="14"
            color="var(--el-text-color-placeholder)"
          />
        </template>
      </el-input>
      <el-image
        class="verify-img"
        @click="getCode"
        :src="verifyImage"
        fit="fill"
      >
        <template #error>
          <div class="image-slot">图片加载中</div>
        </template>
      </el-image>
    </el-form-item>
    <el-button
      type="primary"
      @click="onSubmit"
      :loading="loading"
      class="btn-go"
      >登录</el-button
    >
    <el-button link @click="forgetPass" class="forget-pass">忘记密码</el-button>
  </el-form>
</template>

<script lang="ts">
export default {
  name: "LoginForm",
};
</script>

<script lang="ts" setup>
import { Ref, ref, reactive } from "vue";
import { FormRules } from "element-plus";
import { useAdminStore } from "@/store";
import { getVerifyCode } from "@/api/login/index";
import { debounce } from "@/ui";

// store
const adminStore = useAdminStore();

// emit
const emit = defineEmits(["submit"]);

const loading = ref(false);

// ref
const loginForm: Ref = ref(null);

// 验证码图片,这里为base64
const verifyImage = ref("");

// 验证码请求，点击验证码重新请求
const getCode = (function () {
  // 防抖处理
  const doQuery = debounce(() => {
    getVerifyCode().then(({ data }) => {
      loginFormData.verifyId = data.verifyId;
      verifyImage.value = data.verifyImage;
    });
  }, 300);
  doQuery();
  return doQuery;
})();

// 登录表单数据
const loginFormData = reactive<LoginForm>({
  accountNo: "",
  password: "",
  verifyId: "", //图形验证码ID
  verifyCode: "", //图形验证码code
});

// 表单验证
const loginFormRules = reactive<FormRules>({
  accountNo: {
    required: true,
    message: "请输入账号",
    trigger: "blur",
  },
  password: {
    required: true,
    message: "请输入密码",
    trigger: "blur",
  },
  verifyCode: {
    required: true,
    message: "请输入验证码",
    trigger: "blur",
  },
});

// 提交
const onSubmit = () => {
  loading.value = true;
  // 验证
  loginForm.value.validate(async (valid: boolean) => {
    if (valid) {
      // 登录
      await adminStore.login(loginFormData).catch(() => {
        //登陆失败重新拉取验证码
        getCode();
      });
      emit("submit");
      loading.value = false;
      return true;
    }
    loading.value = false;
    return false;
  });
};

const forgetPass = () => {
  console.log("忘记密码");
};

// 弹窗关闭完成
const clear = () => {
  // 清除验证提示
  if (loginForm.value) {
    loginForm.value.resetFields();
  }
  // 清空表单信息
  Object.assign(loginFormData, {
    accountNo: "",
    password: "",
    verifyCode: "",
    verifyId: "",
  });
};

// 暴露给父组件
defineExpose({
  clear,
});
</script>
<style scoped lang="scss">
.login-form-box {
  .btn-go {
    width: 100%;
  }

  .forget-pass {
    margin: 5px 0 0 0;
    font-size: 90%;
    color: #999;
  }

  .verify-input {
    width: calc(100% - 86px);
    margin-right: 6px;
  }

  .verify-img {
    width: 80px;
    height: 32px;
    border-radius: 4px;
    .image-slot {
      color: var(--el-color-info);
      font-size: 11px;
      text-align: center;
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
        inset;
      border-radius: 4px;
    }
  }
}
</style>
